<panel title="Annual recruitment performance">
    <controlbar>
        <dropdown items="{{filterModeOptions}}" selected="{{filterMode}}"></dropdown>
        <dropdown items="{{commercialOptions}}" selected="{{commercial}}"></dropdown>
        <toggle label="Weighted" value="{{weighted}}"></toggle>
    </controlbar>
    
    <controlbar>
        <multidropdown 
            title={{filterMode.split(" ")[1] + "s"}} 
            items="{{filterItems}}" 
            selected="{{selectedFilterItems}}"></multidropdown>
    </controlbar>
    
    <barchart
        data='{{annualRecruitmentData}}'
        legend='{{examplelegend}}'
        width='2000'
        y-label=''
        group-spacing='10'>
    </barchart>
    
    <datatable 
        headers='{{ ["", "2012-13", "2013-14", "2014-15"] }}'
        keys='{{ ["grouping", "2012", "2013", "2014"] }}' 
        data='{{tabledata}}'>
    </datatable>
</panel>
